import { withRouter, useOutlet, history } from 'umi';
import { cloneElement, useRef } from "react"
import './index.less';
import { Action } from "history"
import { CSSTransition, TransitionGroup } from "react-transition-group"


const routerType: Record<Action, string> = {
  'POP': 'back',
  'PUSH': 'in',
  'REPLACE': 'in'
}

export default withRouter((props) => {
  const children = useOutlet()
  const { location } = props;
  return (
    <TransitionGroup className='container' childFactory={(child) => cloneElement(child, { classNames: routerType[history.action] })}>
      <CSSTransition key={location?.pathname} appear timeout={500} unmountOnExit>
        {
          <div className='container_wrapper'>{children}</div>
        }
      </CSSTransition>
    </TransitionGroup>
  )
})
